<template>
  <div>
    <h1>Vue基础语法---Vue指令</h1>
    出生地点:
    <select>
      <option value="">请选择</option>
      <option  v-for="item in city" :key="item.id" >{{ item.name }}</option>
    </select>
  <br/>
    账号:<input type="text" v-model="info.username">
    密码:<input type="password" v-model="info.userpwd">
    <input type="button" value="登录" @click="login">
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
//这是下拉框绑定的数据
//v-bing:单向绑定
let city = reactive([
  {id:1,name:'河北'},
  {id:2,name:'河南'},
  {id:3,name:'山西'},
  {id:4,name:'陕西'},
])

const info =reactive({
  username:'李四',
  userpwd:'123'
  })
const login=()=>{
   alert("username:"+info.username+"userpwd:"+info.userpwd);
}
</script>

<style lang="scss" scoped>

</style>